<template>
  <div>
    <button
      v-for="item in tabs"
      :key="item"
      @click="btnClick(item)"
      :class="{ active: currentItem === item }"
    >
      {{ item }}
    </button>

    <keep-alive include="home,about">
      <component
        :is="currentItem"
        @pagesClick="pagesClick"
        name="pengfan"
        :age="18"
      ></component>
    </keep-alive>

    <!-- <template v-if="currentItem === 'home'">
      <home></home>
    </template>
    <template v-if="currentItem === 'about'">
      <about></about>
    </template>
    <template v-if="currentItem === 'category'">
      <category></category>
    </template> -->
  </div>
</template>

<script>
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
import Category from "./pages/Category.vue";
export default {
  components: {
    Home,
    About,
    Category,
  },
  
  data() {
    return {
      tabs: ["home", "about", "category"],
      currentItem: "home",
    };
  },
  methods: {
    btnClick(current) {
      this.currentItem = current;
    },
    pagesClick() {
      console.log("pages页面发生了点击");
    },
  },
};
</script>

<style scoped>
.active {
  color: red;
}
</style>